<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=2.0">
  <link rel="stylesheet" href="style.css">
  <title>Linyun's CSS Keyboard</title>
</head>

<body>
  <div class="layer layer-0">
    <div class="cable">
    </div>
    <div class="keyboard">
      <div class="logo hidden">
        icdcom's css keyboard
      </div>

      <div class="lights">
        <span>1</span>
        <span>A</span>
        <span>V</span>
      </div>


      <div class="section-a">
        <div class="sec-topleft">
          <div class="key function space1" data="sub-sec-cover1-1">
            Esc
          </div>

          <div class="key function">
            F1
          </div>
          <div class="key function">
            F2
          </div>
          <div class="key function">
            F3
          </div>

          <div class="key function space2">
            F4
          </div>
          <div class="key function">
            F5
          </div>
          <div class="key function">
            F6
          </div>
          <div class="key function">
            F7
          </div>
          <div class="key function space2">
            F8
          </div>

          <div class="key function">
            F9
          </div>
          <div class="key function">
            F10
          </div>
          <div class="key function">
            F11
          </div>
          <div class="key function">
            F12
          </div>
          <!--END FUNCTION KEYS -->
          <div class="sec-cover">
            <div class="sub-sec-cover1-1"></div>
          </div>
        </div>

        <div class="sec-main">
          <div class="key num dual" data="sub-sec-cover2-1">
            ~<br>`
          </div>

          <div class="key num dual">
            !<br>1
          </div>
          <div class="key num dual">
            @<br>2
          </div>
          <div class="key num dual">
            #<br>3
          </div>
          <div class="key num dual">
            $<br>4
          </div>
          <div class="key num dual">
            %<br>5
          </div>
          <div class="key num dual">
            ^<br>6
          </div>
          <div class="key num dual">
            &<br>7
          </div>
          <div class="key num dual">
            *<br>8
          </div>
          <div class="key num dual">
            (<br>9
          </div>
          <div class="key num dual">
            )<br>0
          </div>
          <div class="key num dual">
            _<br>-
          </div>
          <div class="key num dual">
            +<br>=
          </div>
          <div class="key backspace">
            Backspace
          </div>
          <!--END NUMBER KEYS -->

          <div class="key tab" data="sub-sec-cover2-2">
            Tab
          </div>

          <div class="key letter">
            Q
          </div>
          <div class="key letter">
            W
          </div>
          <div class="key letter">
            E
          </div>
          <div class="key letter">
            R
          </div>
          <div class="key letter">
            T
          </div>
          <div class="key letter">
            Y
          </div>
          <div class="key letter">
            U
          </div>
          <div class="key letter">
            I
          </div>
          <div class="key letter">
            O
          </div>
          <div class="key letter">
            P
          </div>
          <div class="key dual">
            {<Br>[
          </div>
          <div class="key dual">
            }<br>]
          </div>
          <div class="key letter dual slash">
            |<br>\
          </div>
          <div class="key caps" data="sub-sec-cover2-3">
            Caps<br>Lock
          </div>
          <div class="key letter">
            A
          </div>
          <div class="key letter">
            S
          </div>
          <div class="key letter">
            D
          </div>
          <div class="key letter">
            F <span class="indicator"></span>
          </div>
          <div class="key letter">
            G
          </div>
          <div class="key letter">
            H
          </div>
          <div class="key letter">
            J <span class="indicator"></span>
          </div>
          <div class="key letter">
            K
          </div>
          <div class="key letter">
            L
          </div>
          <div class="key dual">
            :<br>;
          </div>
          <div class="key dual">
            "<br>'
          </div>
          <div class="key enter">
            Enter
          </div>

          <div class="key shift left" data="sub-sec-cover2-4">
            Shift
          </div>
          <div class="key letter">
            Z
          </div>
          <div class="key letter">
            X
          </div>
          <div class="key letter">
            C
          </div>
          <div class="key letter">
            V
          </div>
          <div class="key letter">
            B
          </div>
          <div class="key letter">
            N
          </div>
          <div class="key letter">
            M
          </div>
          <div class="key dual">
            < <br>,
          </div>
          <div class="key dual">
            ><br>.
          </div>
          <div class="key dual">
            ?<br>/
          </div>
          <div class="key shift right">
            Shift
          </div>
          <div class="key ctrl" data="sub-sec-cover2-5">
            Ctrl
          </div>
          <div class="key">
            &hearts;
          </div>
          <div class="key">
            Alt
          </div>
          <div class="key space">
          </div>
          <div class="key">
            Alt
          </div>
          <div class="key">
            &hearts;
          </div>
          <div class="key">
            Prnt
          </div>
          <div class="key ctrl">
            Ctrl
          </div>
          <div class="sec-cover">
            <div class="sub-sec-cover2-1"></div>
            <div class="sub-sec-cover2-2"></div>
            <div class="sub-sec-cover2-3"></div>
            <div class="sub-sec-cover2-4"></div>
            <div class="sub-sec-cover2-5"></div>
          </div>
        </div>
      </div><!-- end section-a-->

      <div class="section-b">
        <div class="sec-middletop">
          <div class="key function small" data="sub-sec-cover3-1">
            Prnt Scrn
          </div>
          <div class="key function small">
            Scroll Lock
          </div>
          <div class="key function small">
            Pause Break
          </div>
          <div class="sec-cover">
            <div class="sub-sec-cover3-1"></div>
          </div>
        </div>

        <div class="sec-func">
          <div class="sec-middlecenter">
            <div class="key" data="sub-sec-cover4-1">
              Insert
            </div>
            <div class="key">
              Home
            </div>
            <div class="key dual">
              Page Up
            </div>
            <div class="key" data="sub-sec-cover4-2">
              Del
            </div>
            <div class="key">
              End
            </div>
            <div class="key dual">
              Page Down
            </div>
            <div class="sec-cover">
              <div class="sub-sec-cover4-1"></div>
              <div class="sub-sec-cover4-2"></div>
            </div>
          </div>

          <div class="arrows">
            <div class="key hidden">

            </div>
            <div class="key" data="sub-sec-cover5-1">
              ^
            </div>
            <div class="key hidden">

            </div>
            <div class="key" data="sub-sec-cover5-2">
              < </div> <div class="key">
                v
            </div>
            <div class="key">
              >
            </div>
            <div class="sec-cover">
              <div class="sub-sec-cover5-1"></div>
              <div class="sub-sec-cover5-2"></div>
            </div>
          </div><!-- end arrows -->
        </div><!-- end sec-func -->
      </div><!-- end section-b-->
      <div class="section-c">
        <div class="sec-func">
          <div class="key dual" data="sub-sec-cover6-1">
            Num Lock
          </div>
          <div class="key">
            /
          </div>
          <div class="key">
            *
          </div>
          <div class="key dual" data="sub-sec-cover6-2">
            Home <br>7
          </div>
          <div class="key dual">
            ^ <br>8
          </div>
          <div class="key dual">
            PgUp <br>9
          </div>
          <div class="key dual" data="sub-sec-cover6-3">
            < <br>
              6
          </div>
          <div class="key dual">
            <br>5
          </div>
          <div class="key dual">
            > <br>4 </div>
          <div class="key dual" data="sub-sec-cover6-4">
            End <br>3
          </div>
          <div class="key dual">
            v <br>2
          </div>
          <div class="key dual">
            PgDw 1
          </div>
          <div class="key dual ins" data="sub-sec-cover6-5">
            Ins <br>0
          </div>
          <div class="key dual">
            Del <br>.
          </div>
          <div class="sec-cover">
            <div class="sub-sec-cover6-1"></div>
            <div class="sub-sec-cover6-2"></div>
            <div class="sub-sec-cover6-3"></div>
            <div class="sub-sec-cover6-4"></div>
            <div class="sub-sec-cover6-5"></div>
          </div>
        </div><!-- end sec-func -->
      </div><!-- end section-c-->
      <div class="section-d">
        <div class="sec-func">
          <div class="key plus" data="sub-sec-cover7-1">+</div>
          <div class="key enter2">Enter</div>
          <div class="sec-cover">
            <div class="sub-sec-cover7-1"></div>
          </div>
        </div>
      </div>
    </div><!-- end section-keyboard-->
  </div><!-- end layer-0-->
  <script src="./script.js"></script>
</body>

</html>